<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/resrt.css">
    <link rel="stylesheet" href="css/购物车.css">
</head>

<body>

</body>

</html>
<script>

    class Box {
        constructor(arr, arr2, arr3) {
            this.data = arr
            this.txt = arr2
            this.manry = arr3
            this.num = 0
            this.left = null
            this.render_left()
            this.right = null
            this.render_right()
            this.dom = []
            this.img = []
            this.span = []
            this.p = []
            this.span = []
            this.btn = []
            this.img2 = []
            this.jiesuan = {}
            this.sum = 1
            this.src = []
            this.jiage = {}
            this.dom2 = null
            this.down = []
            
            this.many()
            this.click()


            console.log(this.dom);
            console.log(this.dom2);
            console.log(this.img);
            console.log(this.p);
            // console.log();
        }
        render_left() {
            var left = document.createElement('div')
            left.classList.add('left')
            this.left = left
            var body = document.body
            body.appendChild(left)
        }
        render_right() {
            var right = document.createElement('div')
            right.classList.add('right')
            this.right = right
            var body = document.body
            body.appendChild(right)
        }
        render_box() {
            var box = document.createElement('div')
            box.classList.add('box')
            this.dom.push(box)
            this.render_img()
            this.render_text()
            this.render_span()
            this.render_button()

            this.left.appendChild(this.dom[this.num])
        }
        render_img() {
            var img = document.createElement('img')
            img.src = this.data[this.num]
            this.img.push(img)
            this.dom[this.num].appendChild(this.img[this.num])
        }
        render_text() {
            var p = document.createElement('p')
            var wenben = this.txt[this.num]
            p.innerText = wenben
            this.p.push(p)
            this.dom[this.num].appendChild(this.p[this.num])
        }
        render_span() {
            var span = document.createElement('div')
            span.innerText = this.manry[this.num]
            span.classList.add('wenzi')
            this.span.push(span)
            this.dom[this.num].appendChild(this.span[this.num])
        }
        render_button() {
            var btn = document.createElement('button')
            btn.innerText = '加入购物车'

            this.btn.push(btn)
            this.dom[this.num].appendChild(this.btn[this.num])
        }
        render_car(){
            var box3 = document.createElement('div')
            box3.classList.add('top')
        }
        render_jiesuan() {
            for (let i = 0; i < this.img2.length; i++) {
                var box2 = document.createElement('div')
                box2.classList.add('box2')
                var input = document.createElement('input')
                input.type = 'checkbox'
                var img2 = document.createElement('img')
                img2.src = this.img2[i]
                var h2 = document.createElement('h2')
                h2.innerText = this.jiesuan[this.img2[i]]
                var btndown = document.createElement('button')
                btndown.classList.add('jian')
                btndown.innerText = '-'
                var h3 = document.createElement('h3')
                h3.innerText = this.jiage[this.img2[i]]
                var btnup = document.createElement('button')
                btnup.classList.add('jia')
                btnup.innerText = '+'
                var h4 = document.createElement('h4')
                h4.innerText = '删除收藏'
                let danjia = parseInt(this.jiage[this.img2[i]] / this.jiesuan[this.img2[i]])
                btndown.onclick = () => {
                    console.log(this.jiage[this.img2[i]]);
                    console.log(danjia);
                    this.jiesuan[this.img2[i]]--
                    if(this.jiesuan[this.img2[i]] <= 0){
                        console.log(111);
                        this.img2.splice(i , 1)
                        console.log(this.img2);
                        this.clear()
                        this.render_jiesuan()
                    }
                    console.log(this.jiesuan[this.img2[i]]);
                    console.log(this.jiesuan[this.img2[i]] * danjia);
                    h2.innerText = this.jiesuan[this.img2[i]]
                    h3.innerText = this.jiesuan[this.img2[i]] * danjia 
                }
                btnup.onclick = () => {
                    this.jiesuan[this.img2[i]]++
                    h2.innerText = this.jiesuan[this.img2[i]]
                    h3.innerText = this.jiesuan[this.img2[i]] * danjia
                }
                box2.appendChild(input)
                box2.appendChild(img2)
                box2.appendChild(btndown)
                box2.appendChild(h2)
                box2.appendChild(btnup)
                box2.appendChild(h3)
                box2.appendChild(h4)

                this.right.appendChild(box2)

            }
            
        }
        clear() {
            var clear = [...this.right.querySelectorAll('.box2')]
            for (var i = 0; i < clear.length; i++) {
                this.right.removeChild(clear[i])
            }
        }
        many() {
            for (this.num; this.num < arr.length; this.num++) {
                this.render_box()
            }
        }
        // var = document.querySelector()
        click() {
            // this.dom.querySelector('img').src
            var dom = document.querySelectorAll('.left .box')
            this.dom2 = [...dom]
            for (let i = 0; i < dom.length; i++) {
                dom[i].onclick = (e) => {
                    var src = dom[i].querySelector('img').src
                    var text = dom[i].querySelector('.wenzi').innerText
                    if (e.target.nodeName == 'BUTTON') {
                        if (this.img2.indexOf(src) == -1) {
                            this.img2.push(src)
                            this.jiage[src] = Number(text)
                            this.jiesuan[src] = 1
                        } else {
                            text = Number(text)
                            this.jiage[src] = Number(this.jiage[src])
                            console.log(this.jiage[src]);
                            this.jiesuan[src]++
                            this.jiage[src] = text * this.jiesuan[src]
                        }
                        this.clear()
                        this.render_jiesuan()
                    }
                }

            }

        }

        // down(){
        //     if (this.img2.length > 0) {
        //         for (let j = 0; j < this.dom2.length; j++) {
        //             console.log(111);
        //             var res = this.dom2[j].querySelector('.down')
        //             console.log(res);
        //         }
        //     }
        // }

    }

    var arr = ['./img/pic1.jpg', './img/pic2.jpg', './img/pic3.jpg', './img/pic4.jpg', './img/pic5.jpg', './img/pic6.png', './img/pic7.jpg', './img/pic8.jpg']
    var arr2 = ['赤色', '橙色', '黄色', '绿色', '青色', '蓝色', '紫色', '白色']
    var arr3 = [500, 300, 400, 200, 600, 100, 800, 700]
    var res = new Box(arr, arr2, arr3)
</script>